<template>
  <!-- 地图组件 -->
  <div class="box">
    <div class="box" id="container"></div>
    <div class="inp1calss">
      <input type="text" :value="invalue1" id="suggestId" v-if="flag" />
    </div>
  </div>
  <p></p>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useCounterStore } from "../stores/counter";

const stores = useCounterStore();

const invalue1 = ref("");
const maplng = ref("");
const maplat = ref("");
const arr1 = [];

let arr = [];

const a = defineProps({
  scope1: {
    type: Number,
    default: 500,
  },
  invalue: {
    type: String,
  },
  flag: {
    type: Boolean,
    default: true,
  },
});

let map = null;

const initMap = function (lng, lat) {
  map = new BMapGL.Map("container");
  let Point = new BMapGL.Point(lng, lat);

  var marker = new BMapGL.Marker(Point); // 创建标注
  map.addOverlay(marker); // 将标注添加到地图中
  map.panTo(Point);
  map.centerAndZoom(Point, 16);

  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);
};

onMounted(() => {
  initMap(106.65698994776028, 26.65874861913202);
  var geoc = new BMapGL.Geocoder();
  // 点击地图显示经纬度
  map.addEventListener("click", function (e) {
    maplng.value = e.latlng.lng;
    maplat.value = e.latlng.lat;

    if (maplng.value != "" && maplat.value != "") {
      map.clearOverlays();

      var new_point = new BMapGL.Point(maplng.value, maplat.value);
      var marker = new BMapGL.Marker(new_point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      map.panTo(new_point);
    }

    map.clearOverlays();

    var pt = e.latlng;
    var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
    map.addOverlay(marker);
    geoc.getLocation(pt, function (rs) {
      var addComp = rs.addressComponents;
      stores.inpVal =
        addComp.province +
        addComp.city +
        addComp.district +
        addComp.street +
        addComp.streetNumber;
    });
  });
});

const draw = function (arr) {
  console.log(a.scope1);
  // console.log(arr, "-----------------------------");
  arr.forEach((item) => {
    const circle = new BMapGL.Circle(
      new BMapGL.Point(item.lng, item.lat),
      a.scope1,
      {
        strokeColor: "#5E87DB",
        strokeWeight: 2,
        strokeOpacity: 0.2,
        fillColor: "#5E87DB",
      }
    );

    map.addOverlay(circle);
  });
};

var cityGeo = new BMapGL.Geocoder();

const getLG = function (adress) {
  return new Promise((resolve, reject) => {
    cityGeo.getPoint(
      adress,
      function (point) {
        resolve(point);
      },
      "贵州省"
    );
  });
};

const abd = async (value) => {
  // console.log(typeof(value));

  if (typeof value !== "string") {
    // console.log(111);
    value.forEach(async (item) => {
      var local = new BMapGL.LocalSearch(map, {
        renderOptions: { map: map },
      });

      var cityGeo = new BMapGL.Geocoder();
      const point = await getLG(item);
      initMap(point.lng, point.lat);

      const res = await fn(item);

      const obj = {};
      arr = arr.reduce((total, next) => {
        obj[next.key] ? "" : (obj[next.key] = true && total.push(next));
        return total;
      }, []);
      local.search(item);
    });
  }

  // 搜索地点
  var local = new BMapGL.LocalSearch(map, {
    renderOptions: { map: map },
  });
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  var cityGeo = new BMapGL.Geocoder();
  const point = await getLG(value);
  initMap(point.lng, point.lat);

  const res = await fn(value);

  const obj = {};
  arr = arr.reduce((total, next) => {
    obj[next.key] ? "" : (obj[next.key] = true && total.push(next));
    return total;
  }, []);
  local.search(value);
};

const fn = function (value) {
  if (arr1.indexOf(value) === -1) {
    arr1.push(value);
  }
  return new Promise((resolve, reject) => {
    arr1.forEach(async (item) => {
      // cityGeo.getPoint(item, function (point) {}, item);
      let test = await getLG(item);

      arr.push(test);
      resolve(arr);

      draw(arr);
    });
  });
};

defineExpose({
  abd,
});
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.inp1calss {
  z-index: 999;
  position: absolute;
  top: 10%;
  left: 10%;
}
</style>
